<template>
	<view>
		<swiper class="card-swiper square-dot" :indicator-dots="true" :circular="true" :autoplay="false" interval="5000"
		 duration="500" @change="cardSwiper" indicator-color="#8799a3" indicator-active-color="#0081ff">
			<swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''">
				<view class="swiper-item">
					<view class="head-container">
						<view class="head-img-view" @click="goPersonageCenter">
							<image class="head-img" src="../../../static/logo.png"></image>
							<view class="head-text-view">
								<text>测试同学</text>
								<text>八年级十二班</text>
								<text>账号：{{8913443}}</text>
								<!-- <text>{{user.name}}</text>
									<text>{{user.telephone}}</text> -->
							</view>
						</view>
						<view class="iconfont icon-add">
						</view>
					</view>
					<!-- <video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover" v-if="item.type=='video'"></video> -->
				</view>
			</swiper-item>
		</swiper>
		<view class="menu-container">
			<navigator :url="menu.path" class="menu-item" v-for="(menu, i) in menus" :key="i">
				<view :class="'iconfont menu-icon '+ menu.icon" :style="{'color':menu.color}">
				</view>
				<text>{{menu.name}}</text>
			</navigator>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad(e){
			console.log('onLoad')
			this.$http.post('/api/v1/family/selectFamily',{})
		},
		data() {
			return {
				cardCur: 0,
				swiperList: [{
						id: 1,
						type: 'image',
						url: '/static/logo.png',
					},
					{

					}
				],
				dotStyle: false,
				menus: [{
						name: '班级通讯录',
						id: '0101',
						color: '#38B0DE',
						icon: "icon-gonggao",
						path: '/pages/parents/AddressBook/AddressBook',
						badge: 100,
						isShowNum: true,
					},
					{
						name: '课程表',
						id: '0102',
						color: '#6495ED',
						icon: "icon-tongxunlu",
						path: '/pages/parents/ClassSchedule/ClassSchedule',
						badge: 5,
						isShowNum: false,
					},
					{
						name: '班级通知',
						id: '0103',
						color: '#FF7F50',
						icon: "icon-shenqingshenpi",
						path: '/pages/parents/Notice/Notice',
						badge: 20,
						isShowNum: true,
					},
					{
						name: '请假申请',
						id: '0201',
						color: '#38B0DE',
						icon: "icon-banjiguanli",
						path: '/pages/parents/AskForLeave/AskForLeave',
					},
					{
						name: '家庭作业',
						id: '0202',
						color: '#6495ED',
						icon: "icon-chengji",
						path: '/pages/parents/operation/operation',
					},
					{
						name: '考试成绩',
						id: '0203',
						color: '#FF7F50',
						icon: "icon-kebiaoxinxi",
						path: '/pages/parents/TestScore/TestScore',
						badge: 5,
						isShowNum: false,
					},
					{
						name: '出入校记录',
						id: '0203',
						color: '#FF7F50',
						icon: "icon-kebiaoxinxi",
						path: '/pages/parents/InAndOut/InAndOut',
						badge: 5,
						isShowNum: false,
					},
					// {
					// 	name: '设备管理',
					// 	id: '0203',
					// 	color: '#FF7F50',
					// 	icon: "icon-kebiaoxinxi",
					// 	path: '/pages/parents/EquipmentManagement/EquipmentManagement',
					// 	badge: 5,
					// 	isShowNum: false,
					// },
					{
						name: '个人中心',
						id: '0203',
						color: '#FF7F50',
						icon: "icon-kebiaoxinxi",
						path: '/pages/parents/PersonalCenter/PersonalCenter',
						badge: 5,
						isShowNum: false,
					},
				],

			}
		},
		methods: {
			// cardSwiper
			cardSwiper(e) {
				this.cardCur = e.detail.current

			},
		}
	}
</script>

<style scoped>
	/*选择iconfont.css所在的路径*/
	@import '../../../static/iconfont/iconfont.css';

	.head-container {
		display: flex;
		height: 150px;
		align-items: center;
		background-color: #0081ff;
		/* background-image: linear-gradient(45deg, #0081ff, #1cbbb4); */
	}

	.head-img-view {
		align-items: center;
		margin: 10px;
		display: flex;
		flex-direction: row;
	}

	.head-img {
		width: 60px;
		height: 60px;
		border-radius: 50%;
		border: 2px solid #fff;
	}

	.head-text-view {
		/* margin-top: 5px; */
		margin-left: 10px;
		font-size: 15px;
		color: #FFFFFF;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.menu-container {
		display: flex;
		flex-wrap: wrap;
		/* justify-content: space-between; */
		flex-direction: row;
		/* background-color: #FFFFFF; */
	}

	.menu-item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: calc(33.33% - 2px);
		height: 100px;
		font-size: 15px;
		color: #888888;
		margin-right: 2px;
		margin-bottom: 2px;
		background-color: #FFFFFF;
	}

	.menu-item:active {
		background-color: #f9f9f9;
	}

	.menu-icon {
		position: relative;
		justify-content: center;
		color: #FFFFFF;
		font-size: 24px;
		/* height: 90px;
		width: 90px; */
		/* margin-top: -2px; */
		margin-bottom: -5px;
	}
</style>
